<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- // <script src="http://code.jquery.com/jquery-latest.js"></script> -->
  <script type="text/javascript" src="../jquery-2.1.1.js"></script>
</head>
<body>
 
<div class="out overout">
    <p>move your mouse</p>
    <div class="in overout">
      <p>move your mouse</p>
      <p>0</p>
    </div>
   <p>0</p>
</div>
 

 
<script>

    var i = 0;
    var iin = $(".in");

    iin.bind('mouseout',function(e){
      $("p:first", this).text("mouse out");
      $("p:last", this).text(++i);  
      e.stopPropageion() 
    console.log(e)   
    })

    $(".out").bind('mouseout', function() {
      $("p:first", this).text("mouse out");
      $("p:last", this).text(++i);    
    })



    // var n = 0;
    // $("div.enterleave").mouseenter(function() {
    //   $("p:first", this).text("mouse enter");
    // }).mouseleave(function() {
    //   $("p:first", this).text("mouse leave");
    //   $("p:last", this).text(++n);
    // });
</script>
 
</body>
</html>